<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';
import TnSearchBox from '@/uni_modules/tuniaoui-vue3/components/search-box/src/search-box.vue'
import TnTabs from '@/uni_modules/tuniaoui-vue3/components/tabs/src/tabs.vue'
import TnTabsItem from '@/uni_modules/tuniaoui-vue3/components/tabs/src/tabs-item.vue'
    const searchContent = ref('');
	const currentTabIndex = ref(0);
	const tabsData = [
	  {
	    text: '全部',
	    badgeConfig: {
	    },
	  },
	  {
	    text: '使用中',
	    badgeConfig: {
	    },
	  },
	  {
	    text: '订单暂停',
	    badgeConfig: {
	      dot: true,
	    },
	  },
	  {
	    text: '已取消',
	  },
	  {
	    text: '已完结',
	  },
	];
	const orderData = ref({});
    onMounted(() => {
		orderData.value['0'] = [{
			"orderNo": "1234567890",
			"orderStatus": "订单暂停",
			"orderType": "橙艺 · 中国舞",
			"studentName": "吴老六",
			"cellPhone": "13955170653",
			"orderCreateTime": "2022-12-34 11:33:24",
			"executeTimes": "12",
			"totalAmount": "￥1536.00",
			"imageUrl": "../../static/img/product2.jpeg",
			"price": "￥760",
			"amount": "￥760"
		},
		{
			"orderNo": "1234567890",
			"orderStatus": "订单暂停",
			"orderType": "橙艺 · 街舞",
			"studentName": "吴老六",
			"cellPhone": "13955170653",
			"orderCreateTime": "2022-12-34 11:33:24",
			"executeTimes": "12",
			"totalAmount": "￥1536.00",
			"imageUrl": "../../static/img/product1.png",
			"price": "￥760",
			"amount": "￥760"
		}];
		orderData.value['1'] = [{
			"orderNo": "4321455668",
			"orderStatus": "使用中",
			"orderType": "橙艺·架子鼓（3-10）",
			"studentName": "刘邦",
			"cellPhone": "13755170653",
			"orderCreateTime": "2023-12-34 11:33:24",
			"executeTimes": "12",
			"totalAmount": "￥2536.00",
			"imageUrl": "../../static/img/product2.jpeg",
			"price": "￥760",
			"amount": "￥760"
		}];
    });
</script>

<template>
	<view class="page">
		<view class="top_box"></view>
		<view class="search_box ">
			<view class="tnSearchBox_wrapper">
				<TnSearchBox
				    v-model="searchValue"
				    :throllte="true"
					:search-button="false"
					text-align="left"
					:border="false"
					:placeholder="搜索订单"
				    @input="searchInputEvent"
				    @search="searchBtnClickEvent"
				  />
			</view>
		</view>
		<view class="tabs_box">
			<TnTabs v-model="currentTabIndex" :scroll="false" :bar="true" :bar-color="white">
				<TnTabsItem
				  v-for="(item, index) in tabsData"
				  :key="index"
				  :title="item.text"
				  :badge-config="item.badgeConfig"
				/>
			</TnTabs>
		</view>
		
		<view class="order_list_box">
			<view class="order_item tn-flex-column" v-for="(item,index) in orderData[currentTabIndex.toString()]">
				<view class="order_num">
					订单编号：{{item.orderNo}}
				</view>
				<view class="main_row tn-flex-row">
					<view class="image_area">
						<image :src="item.imageUrl" ></image>
					</view>
					<view class="text_area tn-flex-column">
						<view class="text_area_top tn-flex-column">
							<view class="bold_text item_row">{{item.orderType}}</view>
							<view item_row>门店原价：{{item.price}}</view>
						</view>
						<view class="text_area_bottom tn-flex-column tn-flex-end-end">
							<view class="item_row">{{item.orderCreateTime}}</view>
							<view class="item_row bold_text">每阶段：{{item.amount}}</view>
							<view class="item_row bold_text">阶段付总金额：{{item.totalAmount}}</view>
						</view>
					</view>
				</view>
				<view class="btn_row tn-flex-end-end">
					<view class="normal_btn margin_right">申诉</view>
					<view class="blue_btn">查看履约</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.page{
		background-color: rgb(242, 241, 246);
	}
	.top_box {
		background-color:rgb(25, 141, 228);
		padding-top: 90rpx;
		height: 180rpx;
		width: 100%;
		position: relative;
	}
	.search_box{
		padding-left: 45rpx;
		padding-right: 35rpx;
		background-color: white;
		width: 100%;
		.tnSearchBox_wrapper{
			background-color: rgb(246, 246, 246);
			border-radius: 5rpx;
		}
	}
	.tabs_box{
		// padding-bottom: 20rpx;
	}
	.order_list_box{
		margin-top: 30rpx;
		margin-left: 25rpx;
		margin-right: 25rpx;
		.order_item{
			color: rgb(108, 108, 108);
			background-color: white;
			height: auto;
			margin-bottom: 20rpx;
			border-radius: 10rpx;
			padding: 15rpx;
			.order_num{
				padding: 25rpx 0rpx 25rpx 0rpx;
				border-bottom: 1px solid rgb(198, 198, 198);
			}
			.main_row{
				padding-top: 20rpx;
				.item_row{
					margin-bottom: 10rpx;
				}
				.image_area{
					image{
						width: 120px;
						height: 180px;
						border-radius: 20rpx;
					}
				}
				.text_area{
					padding-left: 25rpx;
					width: 100%;
					.bold_text{
						color:#646464;
						font-weight: bold;
					}
					.text_area_bottom{
						height: 100%;
						padding-bottom: 20rpx;
					}
				}
			}
			.btn_row{
				font-size: 36rpx;
				.normal_btn{
					color: rgb(76, 76, 76);
					border: 1px solid rgb(180, 180, 180);
					padding: 5rpx 25rpx 5rpx 25rpx;
					border-radius: 8rpx;
				}
				.margin_right {
					margin-right: 20rpx;
				}
				.blue_btn{
					color: rgb(48, 142, 230);
					border: 1px solid rgb(48, 142, 230);
					padding: 5rpx 25rpx 5rpx 25rpx;
					border-radius: 8rpx;
				}
			}
		}
	}
</style>